<template>
  <div class="myInfomation">
   
    <div class="info" v-if="$store.state.teacherInfomation">
      <el-table :data="tableData" height="500" border style="width: 100%">
        <el-table-column prop="u_name" label="用户名" width="150" fixed> </el-table-column>

        <el-table-column prop="phone" label="手机号" width="150">
          <template slot-scope="scope">
            <el-input
              type="text"
              v-if="scope.row.isEdit"
              v-model="scope.row.phone"
            >
            </el-input>
            <span v-else>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="150">
          <template slot-scope="scope">
            <el-input
              type="text"
              v-if="scope.row.isEdit"
              v-model="scope.row.sex"
            >
            </el-input>
            <span v-else>{{ scope.row.sex==1?'男':'女' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="生日" width="150">
          <template slot-scope="scope">
            <el-input
              type="date"
              v-if="scope.row.isEdit"
              v-model="scope.row.birthday"
            >
            </el-input>
            <span v-else>{{ moment(scope.row.birthday).format('YYYY年MM月DD日 HH:mm') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="150">
          <template slot-scope="scope">
            <el-input
              type="email"
              v-if="scope.row.isEdit"
              v-model="scope.row.email"
            >
            </el-input>
            <span v-else>{{ scope.row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="150">
          <template slot-scope="scope">
            <el-input
              type="text"
              v-if="scope.row.isEdit"
              v-model="scope.row.name"
            >
            </el-input>
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="school" label="学校" width="150">
          <template slot-scope="scope">
            <el-input
              type="text"
              v-if="scope.row.isEdit"
              v-model="scope.row.school"
            >
            </el-input>
            <span v-else>{{ scope.row.school }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="faculty" label="院系" width="150">
          <template slot-scope="scope">
            <el-input
              type="text"
              v-if="scope.row.isEdit"
              v-model="scope.row.faculty"
            >
            </el-input>
            <span v-else>{{ scope.row.faculty }}</span>
          </template>
        </el-table-column>


        <el-table-column prop="teacherid" label="教师号" width="150">
          <template slot-scope="scope">
            <el-input
              type="text"
              v-if="scope.row.isEdit"
              v-model="scope.row.teacherid"
            >
            </el-input>
            <span v-else>{{ scope.row.teacherid }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <div class="button">
              <el-button
                :type="scope.row.isEdit ? 'success' : 'primary'"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >{{ scope.row.isEdit ? "保存" : "编辑" }}</el-button
              >
              <el-button
                :type="scope.row.isEdit ? 'default' : 'danger'"
                size="mini"
                @click="handleDelete(scope.$index, scope.row)"
                >{{ scope.row.isEdit ? "取消" : "删除" }}</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else>请前往个人中心完善信息 <router-link to="/teacherHome/teacherHomepage">点击前往</router-link> </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
import { Message, MessageBox } from "element-ui";
export default {
 
  mounted() {
    //获取学生信息
    this.getTeacherInfomation();
  },
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    //获取老师信息
    getTeacherInfomation() {
      axios
        .get("/v1/teachers/teacherinfomation")
        .then((res) => {
          //   console.log(res.data);
          if (res.data.status == 200) {
            this.tableData = res.data.data;
          }else{
             this.tableData =[];
             //因为删除教师信息会调用，当删除信息后
             let teacherInfomation = false;
             this.$store.commit("setTeacherInfomation",teacherInfomation );
            localStorage.studentInfomation = teacherInfomation;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //修改老师信息
    updateTeacherInfomation(row) {
     
        if (row.sex == "男") {
          row.sex = 1;
        } else if (row.sex == "女") {
          row.sex = 0;
        }

      axios({
        method: "put",
        url: "/v1/teachers/teacherinfomation",
        data: qs.stringify({
          phone: row.phone,
          sex: row.sex,
          birthday: row.birthday,
          email: row.email,
          name: row.name,
          teacherid: row.teacherid,
          school:row.school,
          faculty:row.faculty,
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      })
        .then((result) => {
          if (result.data.status == 200) {
            Message.success({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
            //更新数据
            this.getTeacherInfomation();
          } else {
            Message.error({
              showClose: true,
              message: "修改失败，手机号或邮箱已存在",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //删除学生信息
    deleteTeacherInfomation() {
      axios
        .delete("/v1/teachers/teacherinfomation")
        .then((res) => {
          if (res.data.status == 200) {
            Message.success({
              showClose: true,
              message: "删除成功",
              type: "success",
            });
            //更新数据
            this.getTeacherInfomation();
          } else {
            Message.error({
              showClose: true,
              message: "删除失败",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //点击编辑按钮
    handleEdit(index, row) {
      // 动态设置数据并通过这个数据判断显示方式
      if (row.isEdit) {
        // console.log("保存");
        this.updateTeacherInfomation(row);
        //点击保存时则删除isEdit
        //  this.$delete(obj,key)
        this.$delete(row, "isEdit");
      } else {
        // console.log("编辑");
        console.log(row)
        //点击编辑时设置为true
        this.$set(row, "isEdit", true);
        //点击编辑时把birthday转换贴回input
        row.birthday = row.birthday.substr(0, 10);
        //因为input date类型赋值需要日期格式为2013-09-05字符串
        if(row.sex==1){
          row.sex='男'
        }else if(row.sex==0){
          row.sex='女'
        }
        
      }
    },

    //点击删除
    handleDelete(index, row) {
      if (row.isEdit) {
        // console.log("取消");
        this.$delete(row, "isEdit");
      } else {
        // console.log("删除");
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            //确定删除操作
            this.deleteTeacherInfomation();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
  },
};
</script>
<style lang="scss">
.teacherInfomation {
  margin: 0 auto;
  margin-top: 50px;
  .button {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
</style>